<template>
    <div class="container">
      <div class="title">三维管廊整体图</div>
      <div class="content-container dim-img-container">
        <div class="dim-img-tip">
          <div class="tip-cir" style="background-color: #6EB8FD"></div>
          <div class="tip-text">光缆1</div>
          <div class="tip-cir" style="background-color: #AEFCAE"></div>
          <div class="tip-text">光缆2</div>
          <div class="tip-cir" style="background-color: #FFAFAF"></div>
          <div class="tip-text">光缆3</div>
        </div>
        <img src="../assets/pipe.png" alt="" class="dim-img">
      </div>
    </div>
</template>

<script>
    export default {
        name: 'ThreeDimensional',
        data() {
            return {}
        },
        computed: {},
        methods: {},
        mounted() {

        },
        created() {

        }
    }
</script>

<style lang="stylus" scoped>
  .container
    padding-bottom 0
    height: 100%
  .dim-img-container
    padding: 14px 48px 12px 44px;
    position: relative;
    .dim-img-tip
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      align-items: center;
      position: absolute;
      top: 0;
      right: 28px;
      .tip-cir
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: 3px;
      .tip-text
        opacity: 0.8;
        font-size: 12px;
        color: #FFFFFF;
        letter-spacing: 0.1px;
        margin-right: 8px;
    .dim-img
      width: 150%;
      height: auto;
      margin-left: -30%;
  </style>
